import React, { Component } from "react";
// try_files $uri /index.html 刷新不会404
// 1、打包到服务器
// 2、nginx 代理 前端路由重写
// 3、表单提交，实现
//  1.实现数据双向绑定
//  2.实现基本数据结构绑定
//  3.实现复杂数据结构绑定
//  4.实现ajax 提交 （分别）
// type="password" autoComplete="new-password"

/*type: 3;
const tType = {
  1: "初级老师",
  2: "高级老师",
  3: "特级老师",
  3: "特级老师",
  3: "特级老师",
  3: "特级老师",
  3: "特级老师",
};
初级老师  高级老师   特级老师

tType[type];

tType[type];*/
import Unit from "../../unit";
class index extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      text: "",
      form: {
        name: "",
        email: "",
        text: "",
      },
      college: {
        base: {
          name: "",
          age: "",
          genders: "male",
        },
        web1906: {
          name: "",
          email: "",
          text: "",
        },
      },
    };
    this._changeData = this._changeData.bind(this);
    this._changeData2 = this._changeData2.bind(this);
    this.changeData = this.changeData.bind(this);
    this.putData = this.putData.bind(this);
  }
  _changeData({ target }) {
    const { name, value } = target;
    this.setState({
      [name]: value,
    });
  }
  _changeData2({ target }) {
    const { name, value } = target;
    const form = this.state.form;
    form[name] = value;
    this.setState({
      form,
    });
  }
  changeData({ target }) {
    const college = this.state.college;
    const { name, value } = target;
    const namekey = target.getAttribute("namekey");
    // console.log(e);
    college[namekey][name] = value;
    this.setState({
      college,
    });
  }
  putData() {
    const { name, email, text } = this.state.college.web1906;
    Unit.postApi(
      "api/add",
      {
        uname: name,
        email: email,
        content: text,
      },
      {}
    ).then((res) => {
      console.log(res);
    });
  }
  // componentDidMount() {
  //   this.putData();
  // }
  render() {
    const { name, email, text, form, college } = this.state;
    const { web1906 } = college;
    const style = { display: "block", marginTop: "15px" };
    const { _changeData, _changeData2, changeData, putData } = this;
    return (
      <React.Fragment>
        {/* 基本数据 */}
        <div style={{ marginLeft: "50px" }}>
          <input
            type="text"
            name="name"
            value={name}
            style={style}
            onChange={(e) => _changeData(e)}
          />
          <input
            type="text"
            name="email"
            value={email}
            style={style}
            onChange={(e) => _changeData(e)}
          />
          <input
            type="text"
            name="text"
            value={text}
            style={style}
            onChange={(e) => _changeData(e)}
          />
          <button style={style} onClick={putData}>
            提交
          </button>
        </div>
        {/* 普通数据 */}
        <div style={{ marginLeft: "50px" }}>
          <input
            type="text"
            name="name"
            value={form.name}
            style={style}
            onChange={(e) => _changeData2(e)}
          />
          <input
            type="text"
            name="email"
            value={form.email}
            style={style}
            onChange={(e) => _changeData2(e)}
          />
          <input
            type="text"
            name="text"
            value={form.text}
            style={style}
            onChange={(e) => _changeData2(e)}
          />
          <button style={style} onClick={putData}>
            提交
          </button>
        </div>
        {/* 复杂数据 */}
        <div style={{ marginLeft: "50px" }}>
          <input
            type="text"
            name="name"
            namekey="web1906"
            value={web1906.name}
            style={style}
            onChange={(e) => changeData(e)}
          />
          <input
            type="text"
            name="email"
            namekey="web1906"
            value={web1906.email}
            style={style}
            onChange={(e) => changeData(e)}
          />
          <input
            type="text"
            name="text"
            namekey="web1906"
            value={web1906.text}
            style={style}
            onChange={(e) => changeData(e)}
          />
          <button style={style} onClick={putData}>
            提交
          </button>
        </div>
      </React.Fragment>
    );
  }
}

export default index;
